<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page,index) of pages" :key="index">
      	<div class="icon"  v-for="item of page" :key="item.id" >
      		<div class="icon-img">
      			<img :src="item.imgUrl" class="icon-img-content">
      		</div>
      		<p class="icon-desc">{{item.desc}}</p>
      	</div>
      </swiper-slide>
		</swiper>
		
	</div>
</template>

<script>
export default {
	name: 'Icons',
	props: {
		list: Array
	},
	data(){
		return {
			// iconList:[
			// 	{
			// 		id: '0001',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png',
			// 		desc: '景点门票'
			// 	},
			// 	{
			// 		id: '0002',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/f5/a963333e1fa802.png',
			// 		desc: '本地玩乐'
			// 	},
			// 	{
			// 		id: '0003',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/6a/45f595250c73d102.png',
			// 		desc: '夏日玩水'
			// 	},
			// 	{
			// 		id: '0004',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/5a/13ceb38dcf262f02.png',
			// 		desc: '一日游'
			// 	},
			// 	{
			// 		id: '0005',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/95/8246f27355943202.png',
			// 		desc: '游乐场'
			// 	},
			// 	{
			// 		id: '0006',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/e3/67df61427c8e1302.png',
			// 		desc: '演出'
			// 	},
			// 	{
			// 		id: '0007',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png',
			// 		desc: '南昌必游'
			// 	},
			// 	{
			// 		id: '0008',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/ec/0e1e0238e24ba02.png',
			// 		desc: '婺源'
			// 	},
			// 	{
			// 		id: '0009',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/3e/86314b2af03b7502.png',
			// 		desc: '万达乐园'
			// 	},
			// 	{
			// 		id: '0010',
			// 		imgUrl: 'http://img1.qunarzz.com/piao/fusion/1803/80/416c6ab3368d1f02.png',
			// 		desc: '全部玩乐'
			// 	}
			// ],
			swiperOption: {
			}
		}
	},
	computed: {
		pages (){
			const pages = []
			this.list.forEach((item,index)=> {
				const page = Math.floor(index/8)
				if(!pages[page]){
					pages[page] = []
				}
				pages[page].push(item)
			})
			return pages
		}
	}
};
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	@import '~styles/mixins.styl'
	.icons >>> .swiper-container
		height: 0
		padding-bottom: 50%
	.icons
		margi-top: .1rem
	.icon
		float: left
		width: 25%
		height: 0
		padding-bottom: 25%
		position: relative
		.icon-img
			position: absolute
			top: 0
			left: 0
			right: 0
			bottom: .44rem
			
			box-sizing: border-box
			padding: .1rem
			.icon-img-content
				height: 100%
				display: block
				margin: 0 auto
		.icon-desc
			position: absolute
			bottom: 0
			left: 0
			right: 0
			height: .44rem
			line-height: .44rem
			color: $darkTextColor
			text-align: center
			ellipsis()
</style>